<template>
  <div>
  <el-input
      style="width:50%;margin-bottom: 10px"
      placeholder="请根据姓名输入搜索内容"
      v-model="pagination.queryString"
      clearable>
  </el-input>
    <el-button @click="AdminList()" class="dalfBut">查询</el-button>
    <el-button type="primary" class="butT" @click="handleCreate()">新建</el-button>

  <!-- 数据单向绑定  :data表格数据 -->
  <el-table :data="dataList" border>
    <!-- prop属性  与此处数据的属性一致 -->
    <el-table-column prop="loginName"   label="昵称" width="120" ></el-table-column>
    <el-table-column prop="password"    label="密码" width="300" ></el-table-column>

    <el-table-column label="操作" width="200">
        <template slot-scope="scope">
            <el-button type="primary" size="small" icon="el-icon-edit"   circle @click="handleUpdate(scope.row)" >编辑</el-button>
            <el-button type="danger"  size="small" icon="el-icon-delete" circle @click="handleDelete(scope.row)" >删除</el-button>
        </template>
    </el-table-column>
  </el-table>

  <!-- 分页  :属性="" 单向数据绑定 -->
  <el-pagination
      class="pagiantion"
      @current-change="AdminList"
      :current-page="pagination.currentPage"
      :page-size="pagination.pageSize"
      layout="total, prev, pager, next, jumper"
      :total="pagination.total">
  </el-pagination>

    <!-- 新增管理员弹层 -->
    <div class="add-form">
      <el-dialog title="新增管理员" :visible.sync="dialogFormVisible">
        <el-form ref="dataAddForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="昵称" prop="loginName">
                <el-input v-model="formData.loginName"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="密码" prop="password">
                <el-input v-model="formData.password">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAdd()">确定</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 编辑管理员信息弹层 -->
    <div class="add-form">
      <el-dialog title="编辑管理员信息" :visible.sync="dialogFormVisibleEdit">
        <el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="昵称" prop="loginName">
                <el-input v-model="formData.loginName"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="密码" prop="password">
                <el-input v-model="formData.password">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleEdit = false">取消</el-button>
          <el-button type="primary" @click="handleEdit()">确定</el-button>
        </div>
      </el-dialog>

    </div>


  </div>
</template>

<script>
export default {
  name: "AdminView.vue",
  data() {
    return {
      pagination: {       //分页相关模型数据
        currentPage: 1, //当前页码
        pageSize: 4,    //每页显示的记录数
        total: 100,        //总记录数
        queryString: ""//查询条件
      },
      dataList: [],
      formData:{},
      dialogFormVisible: false,//增加表单不可见
      dialogFormVisibleEdit: false,
      rules: {//校验规则
        loginName: [{ required: true, message: '管理员昵称为必填项', trigger: 'blur' }],
        password: [{ required: true, message: '管理员密码为必填项', trigger: 'blur' }],

      }
    }
  },
  created(){
    this.AdminList()
  },
  methods: {
    //若没有传递当前页码 ， 默认展示第一页
    AdminList(page = 1) {
      this.pagination.currentPage = page
      let param ={
        currentPage:this.pagination.currentPage ,
        pageSize:this.pagination.pageSize,
        queryString:this.pagination.queryString
      }
      axios.get('http://localhost:8099/manager/admin/findPage',{params:param})
          .then(response => {  //response.data.data 等价于 Map 有PageInfo&query
            console.log(response)
            this.pagination.total = response.data.total
            this.dataList = response.data.records
          })
          .catch(error => {
            console.log(error)
          })
    },
    resetForm(){
      this.formData={}
    }
    ,
    handleCreate(){
        this.resetForm()
        this.dialogFormVisible=true
    },
    handleAdd(){
        this.$refs["dataAddForm"].validate((valid)=>{
          if (valid){
            this.dialogFormVisible=false
            axios.post('http://localhost:8099/manager/admin/add',this.formData).then(response=>{
              if (response.data.code ==200){
                this.$message.success(response.data.message);
              }else {
                this.$message.error(response.data.code);
              }
              this.AdminList()
            })
          }else {
            this.$message.error("表单验证失败");
            return false;
          }
        })
    },
    //弹出编辑窗口
    handleUpdate(row){
          axios.get(`http://localhost:8099/manager/admin/${row.id}`).then(response=> {
              if (response.data.code==200){
                this.dialogFormVisibleEdit=true
                this.formData=response.data.data
              }else {
                this.$message.error(response.data.code)
              }
          })
    },
    //编辑完成
    handleEdit(){
      //校验表单
      this.$refs["dataEditForm"].validate((valid)=>{
          if (valid){
            this.dialogFormVisibleEdit=false
            axios.post('http://localhost:8099/manager/admin/update',this.formData).then(response=>{
              if (response.data.code==200){
                this.$message.success(response.data.message)
              }else {
                this.$message.error(response.data.code)
              }
            })
          }else {
            this.$message.error('表单校验失败')
            return false
          }
      })
      location.reload()
    },
    handleDelete(row){
      this.$confirm('是否删除此管理员？','提示',{type:'warning'}).then(()=>{
        axios.delete(`http://localhost:8099/manager/admin/delete/${row.id}`).then(response=>{
          if (response.data.code==200){
            this.$message.success(response.data.message);
            this.AdminList()
          }else {
            this.$message.error(response.data.code);
          }
        })
      })
    }
  }
}
</script>

<style scoped>

</style>